<template>
	<n-form
		ref="formRef"
		:model="formData"
		:rules="rules"
		label-width="80px"
		label-placement="left">
		<n-form-item label="学号" path="studentNo">
			<n-input v-model:value="formData.studentNo" placeholder="请输入学号" />
		</n-form-item>
		<n-form-item label="姓名" path="name">
			<n-input v-model:value="formData.name" placeholder="请输入姓名" />
		</n-form-item>
		<n-form-item label="手机号" path="phone">
			<n-input v-model:value="formData.phone" placeholder="请输入手机号" />
		</n-form-item>
		<n-form-item label="电子信箱" path="email">
			<n-input v-model:value="formData.email" placeholder="请输入电子信箱" />
		</n-form-item>
		<n-form-item label="身份证号" path="idcard">
			<n-input v-model:value="formData.idcard" placeholder="请输入身份证号" />
		</n-form-item>
		<n-form-item label="入学年份" path="year">
			<n-date-picker
				value-format="yyyy"
				v-model:formatted-value="formData.year"
				type="year"
				placeholder="请选择入学年份" />
		</n-form-item>
		<n-form-item label="性别" path="sex">
			<n-radio-group v-model:value="formData.sex">
				<n-radio value="女" label="女"></n-radio>
				<n-radio value="男" label="男"></n-radio>
			</n-radio-group>
		</n-form-item>
		<n-form-item label="是否在校" path="inSchool">
			<n-radio-group v-model:value="formData.inSchool">
				<n-radio value="是" label="是"></n-radio>
				<n-radio value="否" label="否"></n-radio>
			</n-radio-group>
		</n-form-item>
		<n-form-item label="所属末级组织代码" path="classNo">
			<n-input v-model:value="formData.classNo" placeholder="请输入所属末级组织代码" />
		</n-form-item>
		<n-form-item label="所属末级组织名称" path="className">
			<n-input v-model:value="formData.className" placeholder="请输入所属末级组织名称" />
		</n-form-item>
		<n-form-item>
			<n-button type="primary" size="small" @click="save">保存</n-button>
		</n-form-item>
	</n-form>
</template>

<script setup>
import api from '@/data/student'
import { ref, reactive } from 'vue'
const formRef = ref()
const props = defineProps(['editProps', 'getTable', 'classId'])
const id = props.editProps.id
const formData = reactive(await api.createFormData(id, props.classId))
const rules = api.createRules(id)
function save () {
	api.addOrUpdate(id, formData, content => {
		props.editProps.show = false
		props.getTable()
	}, formRef.value)
}

</script>

<style scoped lang="scss">
.n-form {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(2, 50%);
	gap: 10px;
}
</style>